<template>
	<view class="LiveV" :style="{ paddingTop: statusBarHeight }">
		<view class="zhiboBox" v-if="liveMessage.State === 1 && isPlayError == false">
			<video id="liveVideo" class="liveVideo" ref="liveVideo" :src="liveMessage.PlayUrl"
				@loadedmetadata="videoLdedmetadata" @error="videoErrorCallback" :controls="false"
				:enable-progress-gesture="false" autoplay is-live object-fit="contain"></video>
		</view>
		<view class="nozhiboBox" v-else>
			<baseHead :title="liveMessage.Title" :bg="'#100D34'" color="#fff"></baseHead>
			<view class="nozhibo"></view>
			<view class="miaoshu">{{
        liveMessage.State === 0 && BeginTimeTap ? "直播未开始" : "直播已结束"
      }}</view>
			<view class="miaoshu2" v-if="liveMessage.BeginTime">直播时间：{{ liveMessage.BeginTime }}</view>
			<view class="bts">
				<view class="bt" @click="nav(liveMessage.Id)">
					{{ liveMessage.State === 0 && BeginTimeTap ? "立即预约" : "返回" }}
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	const {
		statusBarHeight
	} = uni.getSystemInfoSync();
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		quitGroup,
		joinGroup
	} from "@/utils/tim.js";
	import logger from "@/utils/logger";
	import $http from "@/common/api/api.js";
	export default {
		data() {
			return {
				statusBarHeight,
				isPlayError: false,
				subNavNVue: undefined,
				subMessageNVue: undefined,
				subSendNVue: undefined,
				PostList: undefined,
				userList: undefined,
				bottom: 0,
			};
		},
		computed: {
			...mapState({
				liveMessage: (state) => state.liveMessage,
			}),
			BeginTimeTap() {
				let date = new Date().getTime();
				let date2 = new Date(this.liveMessage.BeginTime).getTime();
				console.log(date > date2 ? true : false);
				return date < date2 ? true : false;
			},
		},
		onLoad(options) {
			this.liveDetail(options.Id);
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#ffffff",
			});
			this.subMessageNVue = uni.getSubNVueById("liveV-message");
			this.subSendNVue = uni.getSubNVueById("liveV-send");
			this.PostList = uni.getSubNVueById("Post-List");
			this.userList = uni.getSubNVueById("user-List");
			this.PostList.hide();
			this.userList.hide();
			const ap = uni.getWindowInfo();
			this.bottom = ap.safeAreaInsets.bottom;
			if (this.liveMessage.State == 1 && this.isPlayError === false) {
				this.videoContext = uni.createVideoContext("liveVideo");
				this.subSendNVue.setStyle({
					position: "fixed",
					bottom: "10px",
					left: "0px",
					height: "90px",
					zindex: "10",
					background: "transparent",
				});
				// 弹窗属性
				// this.PostList.setStyle({
				// 	position: "fixed",
				// 	height: "100%",
				// 	width: "100%",
				// 	bottom: '0px',
				// 	left: '0rpx',
				// 	zindex: "99",
				// 	background: "transparent"
				// });
				// 打开 nvue 子窗体
				this.subMessageNVue.show();
				this.subSendNVue.show();
				uni.$on("joinMessageShow", this.joinMessageShow);
				uni.$on("joinMessageHide", this.joinMessageHide);
				uni.$on("userListMD", this.userListMD);
				uni.onKeyboardHeightChange((obj) => {
					// 获取系统信息
					let _sysInfo = uni.getSystemInfoSync();
					let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight;
					let _diff = obj.height - _heightDiff;
					// 键盘高度
					let height = (_diff > 0 ? _diff : 0) - 2 + "px";
					console.log("键盘高度", _diff);
					if (_diff > 0) {
						this.subSendNVue.setStyle({
							bottom: _diff + "px",
							// height: "80%",
						});
					} else {
						this.subSendNVue.setStyle({
							position: "fixed",
							bottom: "10px",
							left: "0px",
							height: "90px",
							zindex: 10,
							background: "transparent",
						});
					}
				});
			} else {
				this.subMessageNVue.hide();
				this.subSendNVue.hide();
			}
			uni.$on("fenxiang", this.fenxiang);
		},
		methods: {
			...mapMutations(["setLiveMessage"]),
			//直播详情接口
			liveDetail(Id) {
				$http.live
					.liveDetail({
						Id: Id,
					})
					.then((res) => {
						this.setLiveMessage(res.Result);
						this.joinGroup(res.Result.Id + "");
					})
					.catch((error) => {
						console.log(error, "测试");
					});
			},
			//申请加入群聊
			async joinGroup(id) {
				const da = await joinGroup(id);
				if (da) {
					uni.$emit("shezhi", id);
					logger.log(` TUI-chat | onLoad | conversationID: ${id}`);
				}
			},
			nav(Id) {
				if (this.liveMessage.State === 0 && this.BeginTimeTap) {
					$http.live
						.liveReservation({
							Id: Id,
						})
						.then((res) => {
							this.$refs.uToast.show({
								type: "default",
								title: "默认主题",
								message: "预约成功",
								complete() {
									// params.url && uni.navigateTo({
									// 	url: params.url
									// })
								},
							});
						});
				} else {
					uni.navigateBack();
				}
			},
			closeruan() {
				uni.hideKeyboard();
			},
			videoLdedmetadata(e) {
				// const {
				// 	width,
				// 	height,
				// 	duration
				// } = e.detail;
				// console.log("直播视频加载完成", e.detail);
			},
			videoErrorCallback(e) {
				// console.log("直播视频错误", e);
				this.isPlayError = true;
			},
			//退出直播房间
			quitGroup() {
				quitGroup(this.liveMessage.Id + "");
			},
			//显示弹窗
			joinMessageShow() {
				this.PostList.show();
			},
			//关闭弹窗
			joinMessageHide() {
				this.PostList.hide();
			},
			//用户列表开关
			userListMD(tag) {
				if (tag) {
					uni.$emit("getGroupMemberList", 0);
					this.userList.show();
				} else {
					this.userList.hide();
				}
			},
			fenxiang() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					href: 'http://162.14.210.82:8004/live-detail?id=' + this.liveMessage.Id + '',
					summary: this.liveMessage.Title + '精彩直播中',
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		},
		components: {
			baseHead,
		},
		onUnload() {
			this.quitGroup();
		},
		watch: {
			isPlayError(val) {
				if (val) {
					this.subMessageNVue.hide();
					this.subSendNVue.hide();
					this.PostList.hide();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.LiveV {
		display: flex;
		flex: 1;
		height: 100vh;
		flex-direction: column;
		// background-color: #100d34;

		background-color: red;

		.webview {
			display: flex;
			flex: 1;
		}

		.zhiboBox {
			display: flex;
			flex: 1;
			justify-content: center;
			flex-direction: column;
			position: relative;
			align-items: center;
			background-color: red;

			video {
				width: 100%;
				min-height: 100%;
				background-color: transparent;
			}
		}

		.nozhiboBox {
			display: flex;
			flex: 1;
			background-color: #100d34;
			justify-content: center;
			flex-direction: column;

			.nozhibo {
				margin-top: -60%;
				display: flex;
				justify-content: center;
				height: 40%;
				background-image: url("@/static/image/kong.png");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: center;
			}

			.miaoshu {
				display: flex;
				justify-content: center;
				color: #fff;
				font-size: 30rpx;
			}

			.miaoshu2 {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				color: #acaaaa;
				font-size: 24rpx;
			}

			.bts {
				margin-top: 120rpx;
				display: flex;
				justify-content: center;

				.bt {
					padding: 30rpx 0rpx;
					width: 400rpx;
					border-radius: 8rpx;
					background-color: rgba($color: #ffffff, $alpha: 0.1);
					color: #eeeeee;
					text-align: center;
				}
			}
		}
	}
</style>